var TaskNum = 0;
//与主进程通信
const ipcindex = require("electron").ipcRenderer
document.getElementById("close").onclick = function (){
    ipcindex.send('closeChannel',"window-close");
}
//点击加号变色处理
var plus = document.querySelector("#plus");
var add  = document.querySelector("#add");
add.onmousedown = function (){
    plus.src="img/add_circle_black_24dp.svg";
}
add.onmouseup = function (){
    plus.src="img/add_circle_outline_black_24dp.svg";
}



//在div中添加任务
var list = document.querySelector("#container")
add.onclick = function (){


    //添加主体
    const task = document.createElement('div');
    task.id = "task"+TaskNum;
    task.style.cssText =
        "    border-bottom: 2px black solid;\n" +
        "    margin-left: 10px;\n" +
        "    margin-top:5px;" +
        "    width: 280px;\n" +
        "    height: 40px;" +
        "    padding-top: 10px;"
    task.classList.add('animate__animated', 'animate__fadeIn');
    task.style.setProperty('--animate-duration', '1s');
    list.appendChild(task);

    //添加check图标
    const check = document.createElement('img');
    check.id = TaskNum;
    check.onclick = function (){
        var reTask = document.getElementById("task"+check.id);
        reTask.classList.add('animate__animated', 'animate__fadeOut');
        reTask.style.setProperty('--animate-duration', '0.5s');
        setTimeout(function() { list.removeChild(reTask); }, 500);
    }
    check.src = "img/check_circle_black_24dp.svg"
    check.style.cssText = "    height: 25px;\n" +
        "    width: 25px;\n" +
        "    float: left;" +
        "    cursor: pointer;\n"+
        "    border-radius: 50%;\n" +
        "    background: linear-gradient(145deg, #e1dddd, #ffffff);\n" +
        "    box-shadow:  4px 4px 9px #d7d3d3,\n" +
        "    -4px -4px 9px #ffffff;"
    check.onmouseover = function (){
        check.style.cssText = "    height: 25px;\n" +
            "    width: 25px;\n" +
            "    float: left;\n" +
            "    cursor: pointer;\n" +
            "    border-radius: 50%;\n" +
            "    background: linear-gradient(145deg, #e1dddd, #ffffff);\n" +
            "    box-shadow:  4px 4px 9px #d7d3d3,\n" +
            "    -4px -4px 9px #ffffff;"
    }
    check.onmouseleave = function (){
        check.style.cssText = "    height: 25px;\n" +
            "    width: 25px;\n" +
            "    float: left;\n" +
            "    cursor: pointer;\n" +
            "    border-radius: 50%;\n" +
            "    background: linear-gradient(145deg, #ffffff, #e1dddd);\n" +
            "    box-shadow:  4px 4px 9px #d7d3d3,\n" +
            "    -4px -4px 9px #ffffff;"
    }
    task.appendChild(check)

    //添加输入框
    const taskContent = document.createElement('input');
    taskContent.style.cssText = "    width: 140px;\n" +
        "    height: 25px;\n" +
        "    float: left;\n" +
        "    margin-left: 10px;\n" +
        "    background: transparent;\n" +
        "    border: 0"
    task.appendChild(taskContent);

    //添加日期选择框
    const calendar = document.createElement('span');
    calendar.textContent = 5+"\t"+"Days"
    calendar.style.cssText = "    background: transparent;\n" +
        "    float: right;\n" +
        "    width: 100px;\n" +
        "    border: none;\n" +
        "    font-family: KiwiMaru;" +
        "    border-radius: 12px;\n" +
        "    background: #faf5f5;\n" +
        "    box-shadow: inset 4px 4px 4px #dcd8d8,\n" +
        "    inset -4px -4px 4px #ffffff;"
    task.appendChild(calendar);
    //添加内容

    //添加任务数量
    TaskNum++;
}